<template>
<div>
    <h2>展示用户页面</h2>
    <table class="com">
        <tr>
            <td>id</td>
            <td>usernmae</td>
            <td>password</td>
            <td>phone</td>
            <td>email</td>
        </tr>
        <tr v-for="i in items" :key="i.id">
            <td :class="{aa:index==1,bb:index==0,dd:index==2}">{{i.id}}</td>
            <td :class="{aa:index==1,bb:index==0,dd:index==2}">{{i.username}}</td>
            <td :class="{aa:index==1,bb:index==0,dd:index==2}">{{i.password}}</td>
            <td :class="{aa:index==1,bb:index==0,dd:index==2}">{{i.phone}}</td>
            <td :class="{aa:index==1,bb:index==0,dd:index==2}">{{i.email}}</td>
        </tr>
    </table>
     <p>
            <button @click="first_page()">首页</button>
            <button @click="up_page()">上一页</button>
            <button v-for="p in page_list" :key="p" @click="get_page(p)">{{p}}</button>
            <button @click="down_page()">下一页</button>
            <button @click="last_page()">尾页</button>
    </p>
    </div>    
</template>

<script>
import axios from "axios"
import {showuser} from "../axios_api/api.js"
export default {
    name:"showuser",
    data() {
        return {
            items:"",
            page_list:[],
            all_page:'',
            p:1
        }
    },
    mounted(){
        axios({
            url:'http://127.0.0.1:8000/app01/gethero/',
            method:'get'
        }).then(res=>{
            if(res.data.code==200){
                this.items = res.data.data;
            }
        })
    },
    methods:{
        get_info(){
            var data={"page":this.p}
            console.log(data)
            axios({
                url:'http://127.0.0.1:8000/week2/user/',
                method:'get',
                params:data
            }).then(res=>{
                console.log(res.data)
                this.page_list = res.data.page_list;
                this.items = res.data.data;
                this.all_page = res.data.all_page;
            })
        },
        get_page(p){
            console.log(p)
            this.p = p
            this.get_info()
        },
        first_page(){
            this.p = 1
            this.get_info()
        },
        up_page(){
            if(this.p>1){
                this.p -=1
                this.get_info()
            }else{
                this.p = 1
                this.get_info()
            }
        },
        down_page(){
            if(this.p>=this.all_page){
                this.p = this.all_page
                this.get_info()
            }else{
                this.p += 1
                this.get_info()
            }
        },
        last_page(){
            this.p = this.all_page

            this.get_info()
        },
        
    },
    created() {
            this.get_info()
        },
}


</script>

<style>
    .aa{
        background: red
    };
    .bb{
        background: yellow
    };
    .cc{
        background: blueviolet
    };

</style>
